import React, { Component } from 'react'

export default class Homepage extends Component {
  constructor() {
    super()
    this.state = {
      spots: [],
    }
  }
  componentDidMount() {
    // fetch to be modified
    fetch('http://localhost:6633/spots')
      .then(response => response.json())
      .then(data => {
        this.setState({
          spots: data,
        })
      })
  }
  render() {
    const { spots } = this.state
    const mapSpots = (value, index) => (
      <div key={value.id}>{value.name}</div>
    )
    return (
      <div className={`rt-homepage-container`}>
        <h1>Homepage</h1>
        {spots.map(mapSpots)}
      </div>
    )
  }
}